<template>
  <div>孙组件</div>
  <button @click="isShow=true">点我出弹窗</button>
  <teleport to='body' >
    <div v-if="isShow" class="mask" @click="isShow=false">
      <div class="dialog" @click.stop="null">
          这是一个弹窗
      </div>
  </div>
  </teleport>
</template>

<script>
import {ref} from 'vue'
export default {
  name: "Grandson",
  setup() {
    let isShow=ref(false)
    return{
      isShow
    }
  },
};
</script>

<style scoped>
div {
  background: #000;
  color: white;
}
.mask{
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.5);
}
.mask .dialog{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 300px;
  height: 420px;
}
</style>